<!DOCTYPE html>
<html lang="en-US">
<title>Media Controls: mute button accessibility tests</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video controls></video>
<script>
async_test(t => {
  var video = document.querySelector('video');
  video.src = '../content/test.ogv';

  enableTestMode(video);

video.oncanplaythrough = t.step_func_done(_ => {
    var mute_button = muteButton(video);
    assert_not_equals(mute_button, null);

    assert_false(video.muted);

    assert_equals(mute_button.getAttribute('aria-label'),
                  'mute');

    //Click on mute button.
    var coords = elementCoordinates(mute_button);
    clickAtCoordinates(coords[0], coords[1]);

    video.onvolumechange = t.step_func(_ => {
      assert_true(video.muted);
      assert_equals(mute_button.getAttribute('aria-label'),
                    'unmute');

      //Click on unmute button.
      clickAtCoordinates(coords[0], coords[1]);

    video.onvolumechange = t.step_func(_ => {
      assert_false(video.muted);
      assert_equals(mute_button.getAttribute('aria-label'),
                    'mute');
      });
    });
  });
});
</script>
</html>
